<template>
    <div>
        <div class="toubudaohang flex ai-c">
            <el-radio-group v-model="tabPosition">
                <el-radio-button @click.native="$router.push('/layout/pointall')" label="pointall">积分统计
                </el-radio-button>
                <el-radio-button @click.native="$router.push('/layout/pointchange')" label="pointchange">积分变动记录
                </el-radio-button>
                <el-radio-button @click.native="$router.push('/layout/operationLog')" label="operationLog">操作日志
                </el-radio-button>
            </el-radio-group>
        </div>
        <!-- 中间内容 -->
        <div class="point-all-count">
            <!-- 积分统计右边内容 -->
            <div class="point-right">
                <div class="point-top flex ai-c">
                    <div>
                        <el-input clearable v-model="content" placeholder="请输入内容" class="point-input"></el-input>
                    </div>
                    <el-select v-model="operationType" clearable placeholder="请选择操作类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="删除" value="1"></el-option>
                        <el-option label="下载" value="2"></el-option>
                        <el-option label="审核" value="3"></el-option>
                    </el-select>
                    <el-select v-model="type" clearable placeholder="请选择操作端">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="PC端" value="0"></el-option>
                        <el-option label="移动端" value="1"></el-option>
                        <el-option label="后台" value="2"></el-option>
                    </el-select>
                    <div>
                        <el-date-picker v-model="valuetime" align="right" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                    <div>
                        <el-button @click="adminLogPage"></el-button>
                    </div>
                </div>
                <div class="form-list-count">
                    <template>
                        <el-table stripe :data="tableData" style="width: 100%" ref="multipleTable" tooltip-effect="dark"
                            @selection-change="handleSelectionChange">
                            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                            <el-table-column prop="userName" label="用户名" width="150"></el-table-column>
                            <el-table-column prop="createTime" label="时间" width="150"></el-table-column>
                            <el-table-column prop="ip" label="ip地址" width="150">
                            </el-table-column>
                            <el-table-column prop="operationType" label="操作类型" width="180">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.operationType == 1">删除</span>
                                    <span v-else-if="scope.row.operationType == 2">下载</span>
                                    <span v-else-if="scope.row.operationType == 3">审核</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="操作端" width="180">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type == 0">PC端</span>
                                    <span v-else-if="scope.row.type == 1">移动端</span>
                                    <span v-else-if="scope.row.type == 2">后台</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="operate" label="操作内容">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <!-- 分页 -->
                <div class="page-count flex jc-c">
                    <div class="page-numBer">
                        <div class="block">
                            <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                                :current-page="pageNo" @current-change="currentchange">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 按人员统计 -->
            <div class="point-right" v-show="rightContent === 1">
                <!-- <h2>按人员统计内容</h2> -->
                <div class="point-top">
                    <input type="text" class="point-input" placeholder="请输入内容用户名、姓名搜索" />
                    <el-time-select v-model="valueone" :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30',
                    }" placeholder="选择时间">
                    </el-time-select>
                    <el-button type="primary">查询</el-button>
                    <el-button type="primary">导出</el-button>
                </div>

                <!-- 分页 -->
                <div class="page">
                    <div class="page-num">
                        <span>共15条</span>
                    </div>

                    <div class="page-select">
                        <el-select @change="adminLogPage" v-model="pageSize" clearable placeholder="5条/页">
                            <el-option v-for="item in pageNums" :key="item.Numones" :label="item.numBers"
                                :value="item.Numones">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="page-numBer">
                        <div class="block">
                            <el-pagination background layout="prev, pager, next" :total="50">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog class="new-add" width="30%">
            <div class="head-input-add">
                <el-col :span="6">
                    <el-input v-model="userInfo.name" placeholder="请输入分类名称"></el-input>
                </el-col>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addUserclassdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="
    addUserclassdialogVisible = false;
addUserclass();
                ">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 无视频 -->
        <el-dialog>
            <span slot="footer" class="dialog-footer"> > </span>
        </el-dialog>
        <!-- 有视频 -->
        <el-dialog>
            <span slot="footer" class="dialog-footer"> </span>
        </el-dialog>
    </div>
</template>

<script>
import { adminLogPage } from "@/api/index";
export default {
    data() {
        return {
            //   积分统计
            pointMain: [
                {
                    name: "积分统计",
                },
                {
                    name: "积分变动记录",
                },
            ],
            //   分组统计
            groupingPoint: [
                {
                    name: "按分组统计",
                },
                {
                    name: "按人员统计",
                },
            ],
            options: [
                {
                    value: "选项1",
                    label: "黄金糕",
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                },
                {
                    value: "选项3",
                    label: "蚵仔煎",
                },
                {
                    value: "选项4",
                    label: "龙须面",
                },
                {
                    value: "选项5",
                    label: "北京烤鸭",
                },
            ],

            pickerOptions: {
                disabledDate(time) {
                    // return time.getTime() > Date.now();
                },
            },
            value1: "",
            value2: "",
            userInfo: {
                name: "",
                age: "",
                loaction: "",
                position: "",
                major: "",
            },
            tableData: [],
            //   分页
            pageNums: [
                {
                    Numones: 5,
                    numBers: "5条/页",
                },
                {
                    Numones: 10,
                    numBers: "10条/页",
                },
                {
                    Numones: 15,
                    numBers: "15条/页",
                },
            ],
            input: "",
            value: "",
            // 时间选择器
            valueone: "",
            countPoint: 0,
            isPoint: 0,
            rightContent: 0,
            pointAll: 0,
            content: "",
            endTime: "",
            pageNo: 1,
            pageSize: 5,
            startTime: "",
            total: 0,
            valuetime: "",
            tabPosition: "operationLog",
            operationType: '',
            type: ''
        };
    },

    methods: {
        currentchange(val) {
            this.pageNo = val;
            this.adminLogPage();
        },
        adminLogPage() {
            adminLogPage({
                content: this.content,
                endTime: this.valuetime ? this.valuetime[1] : "",
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                startTime: this.valuetime ? this.valuetime[0] : "",
                operationType: this.operationType,
                type: this.type
            }).then((res) => {
                this.tableData = res.data.list;
                this.total = res.data.total;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    },
    created() {
        this.adminLogPage();
    },
    mounted() {
        document
            .querySelector("body")
            .setAttribute("style", "background-color:#f2f2f2;");
    },
    beforeDestroy() {
        document.querySelector("body").removeAttribute("style");
    },
};
</script>

<style lang="scss" scoped>
// 积分变动记录
.point-all-count {
    margin: 24px auto;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
    border-radius: 16px;
}

.point-left {
    width: 267px;

    margin-top: 15px;

    p {
        margin-left: 20px;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
    }
}

.point-list {
    width: 267px;
    margin-top: 20px;
    height: 613px;
    border-right: 1px solid #f2f2f2;
    text-align: center;
}

.point-list>div {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    cursor: pointer;
    color: #7f7f7f;
    margin-bottom: 15px;
}

.point-list .countBg {
    color: #000000;
    font-weight: bold;
    background-color: #f2f2f2;
}

.point-right {
    // width: 1100px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    // padding-top: 40px;
}

.point-right table {
    width: 1000px;
}

.point-top {
    button {
        width: 61px;
        height: 40px;
        background-size: 19px 20px;
        background-repeat: no-repeat;
        border: none;
        background-position: center;
        text-align: center;
        // border-radius: 5px;
        background-color: #ff5478;
        background-image: url("../assets/btnsearch.png");

        align-items: center;
    }

    .point-input {
        width: 227px;
        outline: none;
        margin-right: 20px;
        padding-left: 14px;
        border-radius: 3px;
        height: 40px;


    }

    table {
        width: 0;
    }
}

.point-right .el-table_1_column_8 .el-table__cell {
    width: 200px !important;
}

.el-select {
    margin-right: 26px;
}

.el-table th.el-table__cell>.cell {
    width: 180px !important;
}

.el-table .el-table__cell {
    text-align: center !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    text-align: center !important;
}

.el-table td.el-table__cell div {
    width: 150px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    margin-right: 26px;
}

.el-button--primary {
    margin-right: 15px;
}

.form-list-count {
    // width: 1235px;
    margin-top: 38px;
    // border: 1px solid red;
    // border-right:1px solid red;
}

.el-table th.el-table__cell>.cell {
    text-align: center !important;
}

// 分页
.page {
    width: 853px;
    margin-bottom: 40px;
    display: flex;
    margin-left: 15px;
    justify-content: flex-start;
    margin-top: 40px;
}

.page-num {
    width: 127px;
    // margin-right: 15px;
}

span {
    font-size: 14px;
}

.page-select {
    margin-right: 15px;
    // width: 120px;
    margin-top: -5px;

    input {
        height: 21px;
    }
}

.go-page {
    width: 500px;
    margin-top: 5px;
    margin-left: 12px;

    span {
        display: inline-block;
        margin-right: 5px;
        margin-left: 5px;
    }

    input {
        width: 35px;
        outline: none;
        border-radius: 3px;
        height: 25px;
        border: 1px solid #dce6ea;
    }
}

.page-count {
    margin-bottom: 40px;
    margin-top: 40px;
}

.el-input__icon {
    line-height: 21px !important;
}

.el-table .cell {
    text-align: center !important;
}
</style>
<style scoped lang="scss">
.toubudaohang {
    width: 100%;
    height: 84px;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
    border-radius: 16px;
    padding-left: 30px;
    box-sizing: border-box;
}
</style>